<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康自测系统 - 毅嘉互联科技</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            line-height: 1.6;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .header h1 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .header p {
            font-size: 14px;
            margin: 2px 0;
            opacity: 0.9;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 120px 20px 40px;
        }

        .form-section, .question-section, .result-section {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }

        input[type="text"], input[type="number"], select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .radio-group {
            display: flex;
            gap: 20px;
            margin-top: 5px;
        }

        .radio-group label {
            font-weight: normal;
            cursor: pointer;
        }

        .question {
            margin-bottom: 25px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .question h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .option {
            display: flex;
            align-items: center;
            padding: 10px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .option:hover {
            background: #f0f0f0;
            border-color: #667eea;
        }

        .option input[type="radio"] {
            margin-right: 10px;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .error {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
        }

        .result-section h2 {
            color: #667eea;
            margin-bottom: 20px;
            text-align: center;
        }

        .result-content {
            line-height: 1.8;
        }

        .score {
            font-size: 24px;
            color: #667eea;
            text-align: center;
            margin-bottom: 20px;
        }

        .diagnosis {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            border-left: 4px solid #28a745;
        }

        .recommendations {
            background: #e8f5e8;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }

        .recommendations ul {
            margin-left: 20px;
        }

        .recommendations li {
            margin-bottom: 8px;
        }

        .hidden {
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>©️毅嘉互联科技 - 版权所有，侵权必究</h1>
        <p>制作、校准：谢俊杰</p>
        <p>地址：四川省成都市新津区</p>
    </div>

    <div class="container">
        <!-- 个人信息表单 -->
        <div class="form-section" id="formSection">
            <h2>个人信息</h2>
            <form id="userForm">
                <div class="form-group">
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" maxlength="3" minlength="2" required>
                    <div class="error" id="nameError"></div>
                </div>
                
                <div class="form-group">
                    <label>性别：</label>
                    <div class="radio-group">
                        <label>
                            <input type="radio" name="gender" value="男" required> 男
                        </label>
                        <label>
                            <input type="radio" name="gender" value="女" required> 女
                        </label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="age">年龄：</label>
                    <input type="number" id="age" name="age" min="18" max="35" required>
                    <div class="error" id="ageError"></div>
                </div>
                
                <button type="submit" class="btn">开始测试</button>
            </form>
        </div>

        <!-- 测试题目 -->
        <div class="question-section hidden" id="questionSection">
            <h2>健康自测问卷</h2>
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div id="questionsContainer"></div>
            <button class="btn" id="submitBtn" onclick="submitTest()">提交测试</button>
        </div>

        <!-- 结果展示 -->
        <div class="result-section hidden" id="resultSection">
            <h2>测试结果</h2>
            <div id="resultContent"></div>
            <button class="btn" onclick="restartTest()">重新测试</button>
        </div>
    </div>

    <script>
        // 测试题目数据
        const questions = [
            {
                id: 1,
                question: "您每天的睡眠时间大约是？",
                options: ["少于6小时", "6-7小时", "7-8小时", "超过8小时"]
            },
            {
                id: 2,
                question: "您的睡眠质量如何？",
                options: ["经常失眠", "偶尔失眠", "一般", "很好"]
            },
            {
                id: 3,
                question: "您每周进行中等强度运动的频率是？",
                options: ["从不运动", "1-2次", "3-4次", "5次以上"]
            },
            {
                id: 4,
                question: "您每天的饮水量大约是？",
                options: ["少于1升", "1-2升", "2-3升", "超过3升"]
            },
            {
                id: 5,
                question: "您的饮食习惯是？",
                options: ["经常外卖", "偶尔做饭", "规律三餐", "营养均衡"]
            },
            {
                id: 6,
                question: "您是否有吸烟习惯？",
                options: ["每天吸烟", "偶尔吸烟", "已戒烟", "从不吸烟"]
            },
            {
                id: 7,
                question: "您的饮酒频率是？",
                options: ["每天饮酒", "每周多次", "偶尔饮酒", "从不饮酒"]
            },
            {
                id: 8,
                question: "您是否有定期体检的习惯？",
                options: ["从不体检", "偶尔体检", "每年一次", "每半年一次"]
            },
            {
                id: 9,
                question: "您的工作压力程度是？",
                options: ["非常大", "较大", "一般", "较小"]
            },
            {
                id: 10,
                question: "您每天的屏幕使用时间大约是？",
                options: ["超过10小时", "7-10小时", "4-7小时", "少于4小时"]
            },
            {
                id: 11,
                question: "您的视力状况如何？",
                options: ["近视严重", "轻度近视", "视力正常", "视力良好"]
            },
            {
                id: 12,
                question: "您是否有颈椎或腰椎问题？",
                options: ["严重问题", "轻度不适", "偶尔酸痛", "没有问题"]
            },
            {
                id: 13,
                question: "您的体重指数(BMI)状态是？",
                options: ["偏瘦", "正常", "超重", "肥胖"]
            },
            {
                id: 14,
                question: "您是否有高血压？",
                options: ["已确诊", "临界值", "偶尔偏高", "血压正常"]
            },
            {
                id: 15,
                question: "您的血糖水平如何？",
                options: ["已确诊糖尿病", "糖耐量异常", "空腹血糖偏高", "血糖正常"]
            },
            {
                id: 16,
                question: "您的血脂情况如何？",
                options: ["严重异常", "轻度异常", "边缘升高", "血脂正常"]
            },
            {
                id: 17,
                question: "您是否有心脏不适？",
                options: ["经常心悸胸痛", "偶尔不适", "运动后不适", "心脏健康"]
            },
            {
                id: 18,
                question: "您的消化系统状况？",
                options: ["经常胃痛腹泻", "偶尔不适", "轻度消化不良", "消化良好"]
            },
            {
                id: 19,
                question: "您的皮肤状况如何？",
                options: ["经常过敏", "干燥敏感", "偶尔问题", "皮肤健康"]
            },
            {
                id: 20,
                question: "您的心理状态如何？",
                options: ["经常焦虑抑郁", "偶尔情绪低落", "情绪稳定", "积极乐观"]
            },
            {
                id: 21,
                question: "您的记忆力如何？",
                options: ["明显下降", "偶尔健忘", "基本正常", "记忆力良好"]
            },
            {
                id: 22,
                question: "您的精力水平如何？",
                options: ["经常疲劳", "下午犯困", "基本充足", "精力充沛"]
            },
            {
                id: 23,
                question: "您的免疫力如何？",
                options: ["经常感冒", "季节易病", "偶尔生病", "很少生病"]
            },
            {
                id: 24,
                question: "您的口腔健康如何？",
                options: ["经常牙痛", "牙龈出血", "偶尔问题", "口腔健康"]
            },
            {
                id: 25,
                question: "您的骨密度状况？",
                options: ["骨质疏松", "骨量减少", "边缘值", "骨密度正常"]
            },
            {
                id: 26,
                question: "您的关节状况如何？",
                options: ["经常疼痛", "偶尔不适", "轻度僵硬", "关节灵活"]
            },
            {
                id: 27,
                question: "您的呼吸系统健康？",
                options: ["经常气喘", "轻度气短", "偶尔咳嗽", "呼吸顺畅"]
            },
            {
                id: 28,
                question: "您的泌尿系统健康？",
                options: ["经常问题", "偶尔不适", "轻度异常", "泌尿健康"]
            },
            {
                id: 29,
                question: "您的内分泌系统？",
                options: ["明显异常", "轻度紊乱", "边缘异常", "内分泌正常"]
            },
            {
                id: 30,
                question: "您的生殖系统健康？",
                options: ["明显问题", "轻度异常", "偶尔不适", "生殖健康"]
            },
            {
                id: 31,
                question: "您的听力状况如何？",
                options: ["明显下降", "轻度下降", "偶尔耳鸣", "听力正常"]
            },
            {
                id: 32,
                question: "您的平衡能力如何？",
                options: ["经常头晕", "偶尔失衡", "轻度不稳", "平衡良好"]
            },
            {
                id: 33,
                question: "您的手部灵活性？",
                options: ["明显僵硬", "轻度不灵活", "偶尔笨拙", "灵活协调"]
            },
            {
                id: 34,
                question: "您的反应速度？",
                options: ["明显变慢", "轻度迟缓", "基本正常", "反应敏捷"]
            },
            {
                id: 35,
                question: "您的整体健康满意度？",
                options: ["非常不满意", "不太满意", "基本满意", "非常满意"]
            }
        ];

        let userInfo = {};
        let answers = {};

        // 表单验证
        document.getElementById('userForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value.trim();
            const age = parseInt(document.getElementById('age').value);
            const gender = document.querySelector('input[name="gender"]:checked')?.value;
            
            let isValid = true;
            
            // 姓名验证
            if (name.length < 2 || name.length > 3) {
                document.getElementById('nameError').textContent = '姓名必须为2-3个字';
                isValid = false;
            } else {
                document.getElementById('nameError').textContent = '';
            }
            
            // 年龄验证
            if (age < 18 || age > 35 || isNaN(age)) {
                document.getElementById('ageError').textContent = '年龄必须在18-35岁之间';
                isValid = false;
            } else {
                document.getElementById('ageError').textContent = '';
            }
            
            if (isValid) {
                userInfo = { name, age, gender };
                showQuestions();
            }
        });

        // 显示题目
        function showQuestions() {
            document.getElementById('formSection').classList.add('hidden');
            document.getElementById('questionSection').classList.remove('hidden');
            
            const container = document.getElementById('questionsContainer');
            container.innerHTML = '';
            
            questions.forEach((q, index) => {
                const questionDiv = document.createElement('div');
                questionDiv.className = 'question';
                questionDiv.innerHTML = `
                    <h3>${index + 1}. ${q.question}</h3>
                    <div class="options">
                        ${q.options.map((option, optIndex) => `
                            <label class="option">
                                <input type="radio" name="q${q.id}" value="${optIndex}" required>
                                ${option}
                            </label>
                        `).join('')}
                    </div>
                `;
                container.appendChild(questionDiv);
            });
        }

        // 更新进度条
        function updateProgress() {
            const answered = Object.keys(answers).length;
            const progress = (answered / questions.length) * 100;
            document.getElementById('progressFill').style.width = progress + '%';
        }

        // 监听答案变化
        document.addEventListener('change', function(e) {
            if (e.target.name && e.target.name.startsWith('q')) {
                const questionId = parseInt(e.target.name.replace('q', ''));
                answers[questionId] = parseInt(e.target.value);
                updateProgress();
            }
        });

        // 提交测试
        function submitTest() {
            if (Object.keys(answers).length !== questions.length) {
                alert('请完成所有题目！');
                return;
            }
            
            const score = calculateScore();
            showResult(score);
        }

        // 计算得分
        function calculateScore() {
            let totalScore = 0;
            Object.values(answers).forEach(answer => {
                totalScore += answer;
            });
            return Math.round((totalScore / (questions.length * 3)) * 100);
        }

        // 显示结果
        function showResult(score) {
            document.getElementById('questionSection').classList.add('hidden');
            document.getElementById('resultSection').classList.remove('hidden');
            
            let diagnosis = '';
            let recommendations = [];
            
            if (score >= 80) {
                diagnosis = "您的整体健康状况非常良好！各项指标都在理想范围内。";
                recommendations = [
                    "继续保持现有的健康生活方式",
                    "建议每年进行一次全面体检",
                    "可以适当增加运动强度，挑战更高目标",
                    "保持积极乐观的心态"
                ];
            } else if (score >= 60) {
                diagnosis = "您的健康状况基本良好，但仍有改善空间。";
                recommendations = [
                    "增加每周运动频率至3-4次",
                    "改善饮食结构，增加蔬果摄入",
                    "保证每天7-8小时充足睡眠",
                    "建议每半年进行一次健康检查"
                ];
            } else if (score >= 40) {
                diagnosis = "您的健康状况需要引起重视，存在多项亚健康指标。";
                recommendations = [
                    "立即制定详细的健康改善计划",
                    "每天至少进行30分钟中等强度运动",
                    "严格控制饮食，减少高油高糖食物",
                    "建议3个月内到医院进行全面体检",
                    "考虑咨询专业营养师或健身教练"
                ];
            } else {
                diagnosis = "您的健康状况堪忧，需要立即采取行动！";
                recommendations = [
                    "立即预约医院进行详细体检",
                    "寻求专业医生的诊断和治疗建议",
                    "立即停止不良生活习惯（如吸烟、酗酒）",
                    "制定严格的作息时间表，保证充足睡眠",
                    "考虑寻求专业心理咨询师的帮助",
                    "建议家人参与监督和陪伴改善"
                ];
            }
            
            document.getElementById('resultContent').innerHTML = `
                <div class="score">
                    健康得分：${score}分
                </div>
                <div class="diagnosis">
                    <h3>医学诊断</h3>
                    <p>${diagnosis}</p>
                </div>
                <div class="recommendations">
                    <h3>个性化建议</h3>
                    <ul>
                        ${recommendations.map(rec => `<li>${rec}</li>`).join('')}
                    </ul>
                </div>
                <div style="margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 5px;">
                    <strong>免责声明：</strong>本测试结果仅供参考，不能替代专业医疗诊断。如有任何健康问题，请及时咨询专业医生。
                </div>
            `;
        }

        // 重新测试
        function restartTest() {
            userInfo = {};
            answers = {};
            document.getElementById('userForm').reset();
            document.getElementById('resultSection').classList.add('hidden');
            document.getElementById('formSection').classList.remove('hidden');
        }
    </script>
</body>
</html>
